<template>
  <!--产品推荐轮播-->
  <div class="recommend_swipe" v-if="recList.length">
    <swiper class="swiper_wrap" :options="recSwiperOption" v-if="recList.length" @click.native="handleClickSlide" ref="swiper">
      <swiper-slide v-for="(item) in recList" :key="item.id">
        <div class="banner_product_wrap">
          <div class="banner_product_card" :class="prodType" :style="item.styleObj">
            <div class="product_info" >
              <p class="product_title ellipsis" v-if="prodType!=='ipo'">{{item.prodDesc}}</p>
              <div class="product_title_wrap" v-else>
                <div class="flex_center_between">
                  <p class="product_title ellipsis">{{item.mainTag}}</p>
                  <Countdown :options="item.countdownOptions"></Countdown>
                </div>
                <div class="flex_center_between mt3">
                  <p class="field_text">{{item.prodName}}</p>
                  <p class="field_text">认购倒计时</p>
                </div>
              </div>
              <p class="product_tags" :class="prodType === 'ipo' ? 'flex_center_start' : 'flex_center_center'">
                <span class="product_tag" v-for="(tag, index) in item.tagList" :key="index">{{tag}}</span>
              </p>
              <div class="yield">
                <p :class="['yield_data', item.navClass]">{{item.nav}}</p>
                <p class="yield_key">{{item.navDesc}}</p>
              </div>
              <div class="btn">{{item.btnDesc}}</div>
            </div>
          </div>
        </div>
      </swiper-slide>
      <div class="swiper-pagination rec_swiper_pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import tracking from '@/utils/tracking.js';
import Countdown from '@/components/common/countdown.vue';
import productGridVue from './productGrid.vue';

// 推荐产品轮播组件参数
const recSwiperOption = {
  slidesPerView: 1,
  spaceBetween: 10,
  loop: true,
  pagination: {
    el: '.rec_swiper_pagination',
    // clickable: true
  },
};

let Common;
let appUtils;
export default {
  name: 'productSwiper',
  mixins: [
    tracking
  ],
  components: {
    Swiper,
    SwiperSlide,
    Countdown
  },
  props: ['productList', 'serverCacheKey', 'prodType'],
  computed: {
    recList() {
      return this.productList.map(item => {
        item.styleObj = {};
        if (item.backgroundImg) {
          item.styleObj = { backgroundImage: `url(${item.backgroundImg}` };
        }
        // 收益率
        if (item.nav) {
          item.navValue = Number(item.nav.replace('%', '')) || 0;
          item.navClass = '';
          if (item.navValue) {
            item.navClass = item.navValue > 0 ? 'rise' : 'drop';
          }
        }

        // 按钮文案
        if (!item.btnDesc) {
          item.btnDesc = '立即查看';
          if (this.prodType === 'ipo') {
            // item.btnDesc = item.sub === '1' ? '立即认购' : '即将发行';
            item.btnDesc = '立即认购';
          }
        }

        // 首发基金认购倒计时参数
        if (this.prodType === 'ipo') {
          item.countdownOptions = {
            startDate: item.subBeginTime,
            endDate: item.subEndTime
          };
        }

        return item;
      });
    }
  },
  data() {
    return {
      recSwiperOption, // 产品推荐轮播组件参数
    };
  },
  beforeMount() {
    appUtils = require('@/utils/appUtils').default;
    Common = require('@/utils/common').default;
  },
  methods: {
    goToProduct(product) {
      // TD埋点 CNZZ埋点
      this.buryEventPoint('H5-SYCPC-EVENT', product.name);
      this.buryEventPointCNZZ('H5-SYCPC-EVENT', product.name);

      const redirectUrl = appUtils.native.getRedirectUrl(product);
      if (!redirectUrl && product.prodCode) {
        // 即将发行的首发基金，不可跳转
        if (this.prodType === 'ipo' && product.existInT2 !== '1') {
          return;
        }
        // 跳转产品详情页
        this.$router.push({
          path: `${this.global.publicPath}/fund/detail`,
          query: { prodCode: product.prodCode },
        });
        return;
      }
      // 用全局的跳转方法，尽可能支持各种场景跳转
      this.goRedirectUrl(redirectUrl);
    },
    handleClickSlide(e) { // Fix:自动轮播时，点击事件要加在swiper节点上，否则第二次轮播时click无响应
      console.log('productSwiper realIndex', this.$refs.swiper.$swiper.realIndex);
      const { realIndex } = this.$refs.swiper.$swiper;
      const product = this.recList[realIndex];
      console.log('product', product);
      this.goToProduct(product);
    },
  },
  serverCacheKey: (props) => {
    return props.serverCacheKey;
  }
};
</script>

<style lang="less" scoped>
.recommend_swipe {
  .mt3{
    margin-top: 3px;
  }
  .rec_swiper_pagination {
    bottom: 30px;
  }
  .ipo{

  }
}
</style>